﻿/**
 * 图强销售数据看板JS
 * Dai 2023.10.20
 * **/

/**
 * 左底部数据统计方法
 * **/
function LeftBottomTotal(data) {
    var option = LeftBottomChart(data);
    autoMove(data, option);
}
function autoMove(datas, option) {
    var allData = datas;
    var myChart = echarts.init(document.getElementById('leftMChart'), '');
    myChart.setOption(option);
    //timeOut = setInterval(() => {
    //    if (option.dataZoom[0].endValue == allData.length) {
    //        option.dataZoom[0].endValue = 4;
    //        option.dataZoom[0].startValue = 0;
    //    } else {
    //        option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
    //        option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
    //    }
    //    var myChart = echarts.init(document.getElementById('leftMChart'), '');
    //    myChart.setOption(option);
    //   // myChart.on('mouseover', stop)
    //    //myChart.on('mouseout', goMove(allData,option))
    //}, 3000)
}
function LeftBottomChart(datas) {
    var allData = datas;
    option = {
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow"
            }
        },
        title: {
            text: "客户销售环比",
            top: '2%',
            left: '3%',
            textStyle: {
                color: "rgba(219, 225, 255, 1)",
                fontSize: 13
            }
        },
        legend: {
            show: true,   // 显示图例
            left: "55%",   // 图例组件离容器左侧的距离
            textStyle: {             // 图例文本样式      
                color: "white",
                fontSize: 8,
            },
            top: '2%',
        },

        grid: {
            left: '18%',
            bottom: '6%',
        },
        // 加这块地方重点！！！！！！！
        dataZoom: [
            {            //滑动条
                yAxisIndex: 0, //这里是从X轴的0刻度开始
                show: false, //是否显示滑动条，不影响使用
                type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                startValue: 0, // 从头开始。
                endValue:6, // 一次性展示5个。
            },
        ],
        xAxis: {
            type: "value",
            splitLine: {
                show: false//Y轴线
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff' //X坐标轴字颜色
                },
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: true//X轴线
            }
        },

        yAxis: [
            {
                type: "category",
                inverse: true,
                axisLine: {
                    show: true
                },
                axisTick: {
                    show: false
                },
                axisPointer: {
                    label: {
                        show: true
                    }
                },

                data: allData.map(item => item.name),
                axisLabel: {
                    margin: 5,
                    fontSize: 10,
                    color: "#fff",
                    formatter: function (value) {
                        var ret = '';
                        var maxLength = 4; // 换行字数
                        var valLength = value.length;
                        var rowN = Math.ceil(valLength / maxLength);
                        if (rowN > 1) {
                            for (var i = 0; i < rowN; i++) {
                                var temp = '';
                                var start = i * maxLength;
                                var end = start + maxLength;
                                temp = value.substring(start, end) + '\n';
                                ret += temp;
                            }
                            return ret;
                        } else {
                            return value;
                        }
                    }
                }
            },
            {
                type: "category",
                inverse: true,
                axisTick: "none",
                axisLine: "none",
                offset: -10,
                zlevel: 100,
                show: true,
                position: "left",
                axisLabel: {
                    show: false,
                },
                data: allData.map(item => item.count)
            }
        ],
        series: [
            {
                z: 2,
                name: "本期",
                type: "bar",
                align: "left",
                data: allData
                    .map(item => item.percent)
                    .map((item, i) => {
                        itemStyle = {
                            color: "#5870C4"
                        };
                        return {
                            value: item,
                            itemStyle: itemStyle
                        };
                    }),
                label: {
                    normal: {
                        show: true,
                        position: "right",
                        color: "#fff",
                        fontSize: 12,
                        formatter: function (value) {
                            let val = (value && value.data && value.data.value) || 0;
                            return parseFloat(val);
                        }
                    }
                }
            },
            {
                z: 2,
                name: "往期",
                type: "bar",
                align: "left",
                barCategoryGap: '60%',
                data: allData
                    .map(item => item.count)
                    .map((item, i) => {
                        itemStyle = {
                            color: "#8FCC78"
                        };
                        return {
                            value: item,
                            itemStyle: itemStyle
                        };
                    }),
                label: {
                    normal: {
                        show: true,
                        position: "right",
                        color: "#fff",
                        fontSize: 12,
                        formatter: function (value) {
                            let val = (value && value.data && value.data.value) || 0;
                            return parseFloat(val);
                        }
                    }
                }
            }
        ]
    };

    return option;
}
/***
//停止滚动
function stop() {
    clearInterval(timeOut)
}
//继续滚动
function goMove(data, option) {
    autoMove(data, option);
}**/
var pageNum = 1;
var delayType = "0";
function loadPlanDelay() {
    var dCount =5;
    $.ajax({
        url: "../Statistics/SaleOroderInfo",
        data: { dateType: dateType, pageNum: pageNum, dataCount: dCount, delayType: delayType },
        dataType: "json",
        type: "POST",
        success: function (data) {
            if (data.Result) {
                var d = data.Data;
                if (d.length >= dCount) {
                    pageNum++;
                } else {
                    pageNum = 1;
                }
                $('#sales').empty();
                var title = "逾期天数";
                if (delayType == "0") {
                    title = "剩余天数";
                }
                var t_title = "";
                t_title = '<tr class="bgc" style="width:13%;height:30px"><td>销售订单号</td><td>客户</td>' +
                    '<td style="width:18%;">存货</td><td style="width:17%;">交付日期</td><td>数量</td><td>' + title + '</td><td>跟单人</td></tr> ';
                var row = '';

                for (var i = 0; i < d.length; i++) {
                    var value = d[i].delayDate;
                    if (delayType == "0") {
                        value = 0 - value;
                    }
                    row += '<tr style="height:30px">' +
                        '<td>' + d[i].orderCode + '</td><td> ' + d[i].cuName + '</td><td> ' + d[i].proName + '</td>' +
                        '<td>' + d[i].payDate + '</td><td> ' + d[i].number + '</td><td> ' + value + '</td><td> ' + d[i].maker + '</td></tr > ';
                }

                //$('#sales').empty();
                $('#sales').append(t_title + row);


            } else {
                layer.msg(data.Message);
            }
        }
    });
}

function OrderQuery(type) {
    if (type == "1") {
        $("#yqxs").css("color", "#09E1F9");
        $("#jjyqxs").css("color", "#fff");
        delayType = "1";
    } else if (type == "0") {
        $("#yqxs").css("color", "#fff");
        $("#jjyqxs").css("color", "#09E1F9");
        delayType = "0";
    } 
    pageNum = 1;
    loadPlanDelay();
}
var dateType = "monthQuery";
/**
 *查询数据类型
 */
function QueryData(type) {
    if (type == "2") {
        $("#yearDiv").css("color", "#09E1F9");
        $("#jdDiv").css("color", "#fff");
        $("#monthDiv").css("color", "#fff");
        dateType = "yearQuery";
    } else if (type == "1") {
        $("#yearDiv").css("color", "#fff");
        $("#jdDiv").css("color", "#09E1F9");
        $("#monthDiv").css("color", "#fff");
        dateType = "quarterQuery";
    } else {
        $("#yearDiv").css("color", "#fff");
        $("#jdDiv").css("color", "#fff");
        $("#monthDiv").css("color", "#09E1F9");
        dateType = "monthQuery";
    }

    loadData();
}
function saleData() {
    $.ajax({
        url: "../Statistics/SaleMsgTotal",
        dataType: "json",
        data: { dateType: dateType, dataCount: "9" },
        type: "POST",
        success: function (rsl) {
            if (rsl.Result) {
                var d = rsl.Data;
                MidTopTotal(d["moneyTotal"]);
                LeftTTotal(d["saleorTotal"]);
                LeftBottomTotal(d["cuData"]);
                MidMTotal(d["proSaleTotal"]);
            } else {
                layer.msg(rsl.Message);
            }
        }
    });
}
function ChartLeftTop(datas, title, bgColor) {
    const COLOR = ['#389af4', '#ff8c37', '#ffc257', '#fd6f97', '#a181fc', '#7F38EC', '#3BB9FF', '#7FFFD4', '#6CC417', '#FFDB58'];
    let data = datas;
    option = {
        backgroundColor: bgColor,
        title: {
            text: title,
            left: '5%',
            top: "10",
            textStyle: {
                color: "#fff",
                fontSize: 12,
                fontWeight: 600,
                // padding: [0, 0, 0, 35]
            },
        },
        grid: {
            top: 30,
            left: 13,
            right: 60,
            bottom: '1%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            show: false
        },
        yAxis: {
            show: true,
            inverse: true,
            type: 'category',
            axisLine: {
                show: false
            }
        },
        series: [{
            name: 'label',
            type: 'bar',
            barWidth: 15,
            yAxisIndex: 0,
            label: {
                show: true,
                position: 2,
                color: '#fff',
                fontSize: 11
            },
            data: data.map((item) => {
                return {
                    value: 0,
                    label: {
                        formatter() {
                            return item.label;
                        }
                    }
                };
            })
        }, {
            name: 'value',
            type: 'bar',
            barWidth: 10,
            barMinHeight: 20, // 最小高度
            yAxisIndex: 0,
            label: {
                show: true,
                position: 'right',
                fontSize: 12,
                offset: [0, 0],
                formatter({
                    value
                }) {
                    return `${value}` + "%";
                }
            },
            itemStyle: {
                barBorderRadius: [0, 4, 4, 0]
            },
            data: data.map(({
                value
            }, index) => {
                let color = COLOR[index % COLOR.length];
                return {
                    value,
                    label: {
                        color
                    },
                    itemStyle: {
                        color
                    }
                };
            })
        }]
    };
    return option;
}
function ChartPieLeft(datas, title, bgColor) {
    option = {
        backgroundColor: bgColor,
        color: [
            '#7F38EC', '#6CC417', '#fd6f97', '#ff8c37', '#a181fc', '#3BB9FF', '#7FFFD4', '#FFDB58', '#389af4', '#ffc257'
        ],
        title: {
            text: title,
            left: 'left',
            top: '5%',
            left: '2%',
            textStyle: {
                color: "#fff",
                fontSize: 12
            }
        },
        tooltip: {
            trigger: "item",
            formatter: "{b} : {c} ",
        },
        toolbox: {
            show: true,
        },
        series: [
            {
                type: "pie",
                center: ['50%', '45%'],
                radius: [0, 75],//元饼图的大小
                label: {
                    show: true, //false不显示饼图上的标签
                    position: 'outside', //inside（在饼图上显示）,outside(默认就会出现引导线) center
                    formatter: '{b}:{c}',
                },
                data: datas,
            },
        ],
    };
    return option;
}
function LeftTChart(datas, title, bgColor) {
    var data = datas;
    var color = ['#3BB9FF', '#3EA055', '#8BB381', '#157DEC', '#82CAFF'];//颜色列表
    option = {
        backgroundColor: bgColor,
        color: color,
        title: {
            text: title,
            left: 'left',
            top: '3%',
            left: '2%',
            textStyle: {
                color: "rgba(219, 225, 255, 1)",
                fontSize: 14
            }
        },
        tooltip: {
            trigger: 'item',
            backgroundColor: '#C2DFFF',
            color: '#fff',
            formatter: function (params) {
                return (
                    params.name +
                    '<br/>' +

                    params.data['value'] +
                    '</span>'
                );
            }
        },
        legend: {
            orient: 'vertical',
            icon: "circle",
            left: '2%',
            top: '20%',
            itemWidth: 10,
            itemGap: 8,
            textStyle: {
                rich: {
                    a: {
                        color: '#fff',
                        fontSize: 12,
                        padding: [0, 10, 0, 0]
                    },
                    b: {
                        color: '#fff',
                        fontSize: 12,
                        padding: [0, 10, 0, 10]
                    }
                }
            },
            formatter: function (name) {

                return `{a| ${name}}`;
            }
        },
        series: [
            {
                name: '',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['70%', '50%'],
                avoidLabelOverlap: true,
                label: {
                    normal: {
                        show: false,//不显示标签内容
                        position: 'inside',
                        formatter: '{d}',
                        textStyle: {
                            align: 'center',
                            baseline: 'middle',
                            fontSize: 12,
                            fontWeight: '100',
                            color: '#fff'
                        }
                    }
                },
                labelLine: {
                    show: false
                },

                data: data
            }
        ]
    };
    return option;
}
function LeftTTotal(data) {
    var option = ChartLeftTop(data, "销售任务排行", "");
    leftTChart.setOption(option);
}